<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时蚊情 - 石大蚊侦探</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        canvas {
            border: 1px solid #ccc;
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<header>
    <h1>石大蚊侦探</h1>
    <p>校园蚊情监测新思路</p>
</header>
<nav>
    <a href="index.html">首页</a>
    <a href="live.html">实时蚊情</a>
    <a href="arsenal.html">如何防蚊</a>
    <a href="ecology.html">蚊虫生态链</a>
    <a href="action.html">石大在行动</a>
    <a href="contact.html">联系我们</a>
    <a href="about.html">关于项目</a>
</nav>
<main>
    <h2>实时蚊情</h2>
    <p>这里您可以输入相关数据实时查看校园内的蚊虫活力图。</p>

    <section>
        <h3>淡色库蚊活力图</h3>
        <p>根据环境因素预测当日淡色库蚊的活力变化情况。</p>
        <label for="date">日期:</label>
        <input type="date" id="date" required><br>
        <label for="windSpeed">风速(m/s):</label>
        <input type="number" id="windSpeed" required><br>
        <label for="maxTemperature">最高气温(°C):</label>
        <input type="number" id="maxTemperature" required><br>
        <label for="minTemperature">最低气温(°C):</label>
        <input type="number" id="minTemperature" required><br>
        <label for="humidity">相对湿度(%):</label>
        <input type="number" id="humidity" min="0" max="100" required><br>
        <button onclick="generateGraph()">生成图表</button>
        <br><br>
        <canvas id="chart" width="800" height="400"></canvas>
    </section>
</main>
<footer>
    <a href="contact.html">联系我们</a> | <a href="about.html">关于项目</a>
    <p>Copyright © 2024 石大蚊侦探团队 All Rights Reserved.</p>
</footer>

<script>
    function generateGraph() {
        const date = new Date(document.getElementById('date').value);
        const windSpeed = parseFloat(document.getElementById('windSpeed').value);
        const maxTemperature = parseFloat(document.getElementById('maxTemperature').value);
        const minTemperature = parseFloat(document.getElementById('minTemperature').value);
        const humidity = parseFloat(document.getElementById('humidity').value);

        // 克拉玛依区的经度和纬度
        const latitude = 45.602526;
        const longitude = 84.867844;

        // 计算当前日期的日出日落时间
        const { sunrise, sunset } = calculateSunriseSunset(latitude, longitude, date);

        const canvas = document.getElementById('chart');
        const ctx = canvas.getContext('2d');

        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景网格
        ctx.strokeStyle = '#eee';
        ctx.lineWidth = 0.5;
        for (let i = 0; i < 10; i++) {
            ctx.beginPath();
            ctx.moveTo(50, i * 30 + 50);
            ctx.lineTo(750, i * 30 + 50);
            ctx.stroke();
        }
        for (let i = 0; i < 24; i++) {
            ctx.beginPath();
            ctx.moveTo(i * 30 + 50, 50);
            ctx.lineTo(i * 30 + 50, 350);
            ctx.stroke();
        }

        // 绘制坐标轴
        ctx.strokeStyle = '#333';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(50, 350);
        ctx.lineTo(750, 350);
        ctx.stroke();
        ctx.moveTo(50, 350);
        ctx.lineTo(50, 50);
        ctx.stroke();

        // 绘制时间刻度
        ctx.font = '12px Arial';
        ctx.fillStyle = '#333';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        for (let i = 0; i < 24; i++) {
            ctx.fillText(i.toString().padStart(2, '0') + ':00', i * 30 + 50, 355);
        }

        // 绘制活力百分比刻度
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        for (let i = 0; i < 11; i++) {
            ctx.fillText((i * 10) + '%', 45, 350 - i * 30);
        }

        // 绘制淡色库蚊活力曲线
        ctx.strokeStyle = '#007BFF';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(50, 350);
        for (let i = 0; i < 1440; i += 60) {
            const hour = Math.floor(i / 60);
            const minute = i % 60;
            const temperature = calculateTemperature(hour, maxTemperature, minTemperature);
            const activity = calculateCulexActivity(hour, minute, windSpeed, sunrise, sunset, temperature, humidity);
            ctx.lineTo(i / 2 + 50, 350 - activity * 300);
        }
        ctx.stroke();
    }

    function calculateSunriseSunset(latitude, longitude, date) {
        // 将日期转换为儒略日
        const julianDate = date.getTime() / 86400000 + 2440587.5;

        // 计算格林尼治时间的正午时间
        const noonTime = Math.floor(julianDate - longitude / 360 + 0.5);

        // 计算太阳平均近点角
        const meanAnomaly = (noonTime - 2451545) / 36525;
        const sunMeanAnomaly = (357.5291 + 0.98560028 * meanAnomaly) % 360;

        // 计算黄经
        const center = 1.9148 * Math.sin(sunMeanAnomaly * Math.PI / 180) +
            0.0200 * Math.sin(2 * sunMeanAnomaly * Math.PI / 180) +
            0.0003 * Math.sin(3 * sunMeanAnomaly * Math.PI / 180);
        const sunTrueLongitude = (sunMeanAnomaly + center + 180 + 102.9372) % 360;

        // 计算太阳赤纬
        const sunDeclination = Math.asin(Math.sin(sunTrueLongitude * Math.PI / 180) * Math.sin(23.4397 * Math.PI / 180)) * 180 / Math.PI;

        // 计算太阳时差
        const eqTime = 4 * (sunTrueLongitude - 0.0053 * Math.sin(sunMeanAnomaly * Math.PI / 180) - 0.0069 * Math.sin(2 * sunMeanAnomaly * Math.PI / 180));

        // 计算日出日落时角
        const cosHorizon = (Math.sin(-0.83 * Math.PI / 180) - Math.sin(latitude * Math.PI / 180) * Math.sin(sunDeclination * Math.PI / 180)) / (Math.cos(latitude * Math.PI / 180) * Math.cos(sunDeclination * Math.PI / 180));
        const hourAngle = Math.acos(cosHorizon) * 180 / Math.PI;

        // 计算日出日落时间
        const sunriseTime = 720 - 4 * (longitude + hourAngle) - eqTime;
        const sunsetTime = 720 - 4 * (longitude - hourAngle) - eqTime;

        // 将分钟转换为小时和分钟
        const sunriseHour = Math.floor(sunriseTime / 60);
        const sunriseMinute = Math.floor(sunriseTime % 60);
        const sunsetHour = Math.floor(sunsetTime / 60);
        const sunsetMinute = Math.floor(sunsetTime % 60);

        return {
            sunrise: { hour: sunriseHour, minute: sunriseMinute },
            sunset: { hour: sunsetHour, minute: sunsetMinute }
        };
    }

    function calculateTemperature(hour, maxTemperature, minTemperature) {
        // 根据最高温度和最低温度估算每小时的温度
        const temperatureRange = maxTemperature - minTemperature;
        const midTemperature = (maxTemperature + minTemperature) / 2;
        const hourlyTemperature = midTemperature + temperatureRange * Math.sin((hour - 6) * Math.PI / 12) / 2;
        return hourlyTemperature;
    }

    function calculateCulexActivity(hour, minute, windSpeed, sunrise, sunset, temperature, humidity) {
        // 根据淡色库蚊的活动特点计算其活力
        let activity = 0;
        const currentTime = hour * 60 + minute;
        const sunriseTime = sunrise.hour * 60 + sunrise.minute;
        const sunsetTime = sunset.hour * 60 + sunset.minute;
        if (currentTime >= sunsetTime - 120 || currentTime <= sunriseTime + 120) {
            activity += 0.3;
        }
        if (windSpeed < 3) {
            activity += 0.2;
        }
        if (temperature >= 20 && temperature <= 30) {
            activity += 0.3;
        }
        if (humidity >= 70) {
            activity += 0.2;
        }
        return Math.min(activity, 1);
    }
</script>
</body>
</html>